<template>
  <div class="interview-detail-container">
    <!-- 头部导航栏 -->
    <el-header class="header">
      <div class="logo">职途导师</div>
      <el-menu 
        mode="horizontal" 
        :default-active="activeMenu" 
        class="nav-menu"
        router
      >
        <el-menu-item index="/home">主页</el-menu-item>
        <el-menu-item index="/pending-interviews">待面试列表</el-menu-item>
        <el-menu-item index="/interview-history">面试历史记录</el-menu-item>
      </el-menu>
      <div class="user-info">
        <el-dropdown>
          <span class="user-dropdown">
            <el-avatar :size="32" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            <span class="username">用户名</span>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>设置</el-dropdown-item>
              <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    
    <!-- 内容主体 -->
    <el-main class="main-content">
      <div class="page-header">
        <h2 class="page-title">面试详情</h2>
        <el-button type="primary" icon="ArrowLeft" @click="goBack">返回</el-button>
      </div>
      
      <!-- 面试详情内容 -->
      <el-card v-loading="loading" class="detail-card">
        <template v-if="interview">
          <div class="interview-info">
            <h3>{{ interview.position }} - {{ interview.company }}</h3>
            <div class="info-item">
              <span class="label">面试日期：</span>
              <span>{{ interview.date }}</span>
            </div>
            <div class="info-item">
              <span class="label">面试类型：</span>
              <el-tag :type="getInterviewTypeTag(interview.type)">{{ interview.type }}</el-tag>
            </div>
            <div class="info-item">
              <span class="label">成绩：</span>
              <el-tag :type="getScoreTagType(interview.score)">{{ interview.score }}</el-tag>
            </div>
            <div class="info-item">
              <span class="label">结果：</span>
              <el-tag :type="interview.result === '通过' ? 'success' : 'danger'">{{ interview.result }}</el-tag>
            </div>
          </div>
          
          <el-divider />
          
          <div class="interview-content">
            <h3>面试问题</h3>
            <el-timeline>
              <el-timeline-item
                v-for="(question, index) in interview.questions"
                :key="index"
                :timestamp="question.time"
                :type="question.type"
              >
                <el-card class="question-card">
                  <h4>{{ question.content }}</h4>
                  <div class="answer">
                    <div class="label">我的回答：</div>
                    <div class="content">{{ question.answer }}</div>
                  </div>
                  <div class="feedback">
                    <div class="label">面试官点评：</div>
                    <div class="content">{{ question.feedback }}</div>
                  </div>
                  <div class="score">
                    <div class="label">得分：</div>
                    <el-rate
                      v-model="question.rating"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value} 分"
                    />
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
          
          <el-divider />
          
          <div class="interview-summary">
            <h3>总体评价</h3>
            <el-card class="summary-card">
              <p>{{ interview.summary }}</p>
            </el-card>
          </div>
        </template>
        <el-empty v-else description="未找到面试详情" />
      </el-card>
    </el-main>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { ArrowLeft } from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();
const activeMenu = ref('/interview-history');
const loading = ref(true);
const interview = ref(null);

// 假设的面试详情数据
const mockInterviewDetail = {
  id: 1,
  position: 'Vue开发工程师',
  company: '阿里巴巴',
  date: '2023-11-20',
  time: '14:00-15:30',
  type: '技术面试',
  score: 92,
  result: '通过',
  questions: [
    {
      time: '14:05',
      type: 'primary',
      content: '请介绍一下Vue的生命周期钩子函数及其用途',
      answer: 'Vue组件的生命周期钩子包括：beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed等。其中created用于组件实例创建后执行初始化操作，mounted用于DOM渲染完成后的操作，updated用于数据更新后执行副作用等。',
      feedback: '回答比较全面，但可以更深入讲解每个钩子函数的具体应用场景',
      rating: 4.5
    },
    {
      time: '14:15',
      type: 'success',
      content: '请解释Vue中的响应式原理',
      answer: 'Vue2使用Object.defineProperty来拦截对象属性的访问和修改，从而实现数据响应式。Vue3则使用Proxy对象，可以拦截更多操作并且性能更好。当数据变化时，Vue会通知使用该数据的组件进行更新。',
      feedback: '回答准确，清晰地说明了Vue2和Vue3的区别，但可以更详细地解释依赖收集的过程',
      rating: 4
    },
    {
      time: '14:25',
      type: 'warning',
      content: '你是如何处理Vue项目中的状态管理的？',
      answer: '对于小型项目，我使用组件内状态和props传递。对于中大型项目，我会使用Vuex或Pinia进行集中式状态管理。Vuex有state, mutations, actions和getters四个部分，Pinia则简化了这一模型，提供了更好的TypeScript支持。',
      feedback: '回答全面，能够根据项目规模选择合适的状态管理方案，并且清楚地解释了各个状态管理库的优缺点',
      rating: 5
    }
  ],
  summary: '候选人对Vue框架有深入的理解，能够清晰解释Vue的核心概念和工作原理。在技术问题上表现出色，特别是在组件设计和状态管理方面有丰富的实践经验。沟通表达能力强，逻辑思维清晰。建议进一步增强在性能优化方面的经验。总体来说，是一位很有潜力的前端开发人才。'
};

// 获取面试类型对应的标签类型
const getInterviewTypeTag = (type: string) => {
  if (type === '技术面试') return 'primary';
  if (type === 'HR面试') return 'success';
  return 'info';
};

// 获取分数对应的标签类型
const getScoreTagType = (score: number) => {
  if (score >= 90) return 'success';
  if (score >= 80) return 'warning';
  if (score >= 70) return 'info';
  return 'danger';
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('isLoggedIn');
  router.push('/login');
};

onMounted(() => {
  // 获取面试ID
  const interviewId = route.params.id;
  
  // 模拟API请求
  setTimeout(() => {
    // 假设这里是根据ID获取面试详情的逻辑
    // 在实际应用中，这里应该是一个API调用
    interview.value = mockInterviewDetail;
    loading.value = false;
  }, 1000);
});
</script>

<style scoped>
.interview-detail-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 999;
}

.logo {
  font-size: 22px;
  font-weight: bold;
  color: #1890ff;
  margin-right: 40px;
}

.nav-menu {
  flex: 1;
  border-bottom: none;
}

.user-info {
  margin-left: 20px;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.username {
  margin-left: 8px;
}

.main-content {
  padding: 20px;
  background-color: #f5f7fa;
  flex: 1;
  overflow-y: auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.detail-card {
  margin-bottom: 20px;
}

.interview-info {
  margin-bottom: 20px;
}

.interview-info h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
}

.info-item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.label {
  font-weight: bold;
  margin-right: 10px;
  color: #666;
}

.question-card {
  margin-bottom: 0;
}

.question-card h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}

.answer, .feedback, .score {
  margin-top: 10px;
}

.answer .label, .feedback .label, .score .label {
  font-weight: bold;
  color: #666;
  margin-bottom: 5px;
}

.summary-card {
  background-color: #f8f8f8;
}

.summary-card p {
  margin: 0;
  line-height: 1.6;
}
</style> 